<template>
  <div class="data-panel">
    <div class="panel-header">
      <div class="panel-title">
        <span class="title-icon">📊</span>
        需求列表
        <div class="button-group">
          <a-button class="add-btn" @click="$emit('handleAdd')">
            <PlusOutlined />
            新增
          </a-button>
          <a-button class="preview-btn" @click="$emit('handlePreview')">
            <EyeOutlined />
            预览
          </a-button>
        </div>
      </div>
      <div class="panel-subtitle">共 {{ totalCount }} 条需求记录</div>
    </div>

    <a-table
        bordered
        size="middle"
        class="tech-table"
        :loading="props.loading"
        :columns="tableColumns"
        :data-source="currentPageData"
        :custom-row="customRow"
        :scroll="{ x: 1200 }"
        :pagination="paginationConfig"
        @change="handleTableChange"
    >
    </a-table>
  </div>
</template>

<script setup lang="ts">
import {Button, Table, type TablePaginationConfig,} from 'ant-design-vue';
import {EyeOutlined, PlusOutlined} from '@ant-design/icons-vue';
import {computed, ref, watch} from 'vue';

const ATable = Table;
const AButton = Button;

// 定义props
interface Props {
  fieldMap: {
    [key: string]: string;
  };
  loading:boolean;
  dataSource: any[]; // 接收外部传入的数据源
  columnWidths?: { // 列宽度配置
    [key: string]: string | number;
  };
}

const props = withDefaults(defineProps<Props>(), {
  columnWidths: () => ({})
});

// 分页相关状态
const currentPage = ref(1);
const pageSize = ref(10);
const totalCount = computed(() => props.dataSource.length);

// 当前页数据
const currentPageData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return props.dataSource.slice(startIndex, endIndex);
});

// 分页配置
const paginationConfig = computed<TablePaginationConfig>(() => ({
  current: currentPage.value,
  pageSize: pageSize.value,
  total: totalCount.value,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number, range: [number, number]) =>
      `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
  pageSizeOptions: ['10', '20', '50', '100'],
  size: 'default',
}));

// 处理表格变化（分页、排序等）
const handleTableChange = (paginator: any) => {
  if (paginator) {
    currentPage.value = paginator.current;
    pageSize.value = paginator.pageSize;
  }
};

// 监听数据源变化，重置到第一页
watch(() => props.dataSource, () => {
  currentPage.value = 1;
  selectedRowKey.value=null;
  selectedRow.value=null;
});

// 根据fieldMap生成表格列
const tableColumns = computed(() => {
  return Object.entries(props.fieldMap).map(([key, label]) => ({
    title: label,
    dataIndex: key,
    key: key,
    ellipsis: true,
    width: props.columnWidths[key] || '150px', // 使用传入的宽度或默认值
  }));
});

const selectedRowKey = ref<string | number | null>(null);
const selectedRow = ref<any>(null);
const customRow = (record: any) => {
  return {
    style: {
      cursor: 'pointer',
    },
    onClick: () => {
      selectedRowKey.value = record.id;
      selectedRow.value = record;
    },
    class: {
      'selected-row': selectedRowKey.value === record.id
    }
  };
};

defineExpose({
  pagination: computed<TablePaginationConfig>(() => ({
    current: currentPage.value,
    pageSize: pageSize.value,
    total: totalCount.value,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number, range: [number, number]) =>
        `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
    pageSizeOptions: ['10', '20', '50', '100'],
    size: 'default',
  })),
  selectedRowKey:computed(() => selectedRowKey.value),
  selectedRow:computed(() => selectedRow.value),
});
</script>

<style scoped>
/* 样式保持不变 */
.data-panel {
  background: rgba(30, 30, 30, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  margin-top: 20px;
}

.data-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #0ea5e9, transparent);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
}

.panel-title {
  font-size: 18px;
  font-weight: 600;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 15px;
}

.title-icon {
  margin-right: 10px;
  font-size: 20px;
}

.button-group {
  display: flex;
  gap: 12px;
}

.add-btn, .preview-btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  height: 36px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #475569;
  background: rgba(15, 23, 42, 0.7);
  color: #94a3b8;
}

.add-btn:hover, .preview-btn:hover {
  border-color: #0ea5e9;
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.1);
  transform: translateY(-1px);
}

.panel-subtitle {
  font-size: 14px;
  color: #94a3b8;
}

.tech-table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #334155;
}
.tech-table :deep(.ant-table-tbody > tr.selected-row > td) {
   background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
   border-color: #0ea5e9;
   position: relative;
 }

.tech-table :deep(.ant-table-tbody > tr.selected-row > td::before) {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
}

.tech-table :deep(.ant-table-tbody > tr.selected-row:hover > td) {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.4) 0%, rgba(59, 130, 246, 0.3) 100%) !important;
}


.tech-table ::v-deep(.ant-table) {
  background: transparent;
  color: #f1f5f9;
}

.tech-table :deep(.ant-table-thead > tr > th) {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.8) 50%, rgba(15, 23, 42, 0.1) 100%) !important;
  color: white !important;
  font-weight: 600;
  border-bottom: 1px solid #334155;
  text-align: center;
}

.tech-table :deep(.ant-table-tbody > tr > td) {
  border-bottom: 1px solid #334155;
  background: rgba(50, 100, 200, 0.1);
  color: #e2e8f0;
  transition: all 0.3s ease;
}

.tech-table :deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(14, 165, 233, 0.1) !important;
  color: #0ea5e9;
}

.tech-table ::v-deep(.ant-table-pagination) {
  margin: 16px 0;
  padding: 0 16px;
}

.tech-table ::v-deep(.ant-pagination) {
  color: #94a3b8;
}

.tech-table ::v-deep(.ant-pagination-item-active) {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.2);
}

.tech-table ::v-deep(.ant-pagination-prev .ant-pagination-item-link),
.tech-table ::v-deep(.ant-pagination-next .ant-pagination-item-link) {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid #475569;
  color: #94a3b8;
}

/* 分页器样式优化 */
.tech-table ::v-deep(.ant-pagination-item) {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid #475569;
}

.tech-table ::v-deep(.ant-pagination-item a) {
  color: #94a3b8;
}

.tech-table ::v-deep(.ant-pagination-item:hover) {
  border-color: #0ea5e9;
}

.tech-table :deep(.ant-pagination-item:hover a) {
  color: #0ea5e9;
}

.tech-table ::v-deep(.ant-pagination-options) {
  color: #94a3b8;
}

.tech-table ::v-deep(.ant-selection-item) {
  color: #94a3b8;
}

.tech-table ::v-deep(.ant-select-selector) {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid #475569 !important;
  color: #94a3b8 !important;
}

.tech-table ::v-deep(.ant-select-dropdown) {
  background: rgba(46, 57, 87, 0.7) !important;
  border: 1px solid #475569 !important;
  color: #94a3b8 !important;
  ::v-deep(.ant-select-item){
    background: rgba(46, 57, 87, 0.6) !important;
    color: #94a3b8
  }
  ::v-deep(.ant-select-item-option-selected){
    background: rgba(26, 37, 57, 0.8) !important;
    color: #94a3b8
  }
}

.tech-table ::v-deep(.ant-select-arrow) {
  color: #94a3b8 !important;
}
</style>